<template>
  <view class="fun-flex-col page">
    <view class="fun-flex-col fun-self-stretch group_2">
      <view class="fun-flex-col group_3">
        <view class="fun-flex-row fun-justify-center fun-self-stretch fun-relative">
          <view class="fun-self-center group_4 pos"></view>
          <image class="image_4" src="../../../static/26c3bd150efdf23561443b2c97dae512.png" />
        </view>
        <text class="fun-mt-16 fun-self-center font text_3">Your request has been received.</text>
      </view>
      <view class="fun-flex-col mt-23">
        <text class="fun-self-center font_2 text_4">
          We will process it as soon as possible. The processing progress can be viewed in the “Withdrawal Details”
        </text>
        <view class="fun-mt-22 fun-flex-col fun-self-stretch">
          <view class="fun-flex-col section">
            <view class="fun-flex-col fun-self-stretch">
              <view class="fun-flex-row fun-justify-between fun-items-center group_5">
                <text class="font_3 text_6">Withdrawal to your crypto wallet</text>
                <text class="font text_5">$30,000.00</text>
              </view>
              <view class="fun-flex-col fun-relative group_6">
                <view class="fun-flex-row fun-justify-between">
                  <view class="fun-flex-col">
                    <view class="fun-flex-row fun-items-center fun-self-stretch">
                      <image class="fun-shrink-0 image_5" src="/..../../static/5b8472324b9ecf819b3283abe5f904e8.png" />
                      <text class="fun-ml-8 font_3 text_7">Application Submitted </text>
                    </view>
                    <view class="fun-self-start section_2 view"></view>
                  </view>
                  <view class="fun-flex-row fun-self-start group_7">
                    <text class="font_4 text_8 text_9">6-5</text>
                    <text class="font_4 text_8 text_10 ml-5">14:37</text>
                  </view>
                </view>
                <view class="fun-flex-row fun-items-center group_8 view_2">
                  <view class="section_3"></view>
                  <text class="font_3 text_13 ml-13">Processing of applications from the trading desk</text>
                </view>
                <view class="fun-flex-row group_8 view_3">
                  <view class="section_3"></view>
                  <text class="font_5 text_14 ml-13">Initiation of transfer instructions</text>
                </view>
                <view class="fun-flex-row fun-items-center pos_2">
                  <view class="fun-shrink-0 section_3"></view>
                  <text class="font_5 text_11">Risk Control</text>
                  <text class="font_5 text_12">and Anti-Money Laundering Investigation</text>
                </view>
                <view class="section_4 pos_3"></view>
                <view class="section_4 pos_4"></view>
                <view class="fun-flex-col group_9 pos_5">
                  <view class="fun-flex-row fun-self-stretch group_10">
                    <view class="fun-shrink-0 section_3"></view>
                    <text class="font_5 ml-13">Transfer Successful</text>
                  </view>
                  <view class="fun-shrink-0 fun-self-start fun-relative section_2 view_4"></view>
                </view>
              </view>
            </view>
            <text class="fun-mt-30 fun-self-start font_4 text_15">Order Number.:123456789</text>
          </view>
          <view class="fun-flex-col group_11">
            <text class="fun-self-start font_2 text_8">Attention:</text>
            <text class="fun-self-stretch font_2 text_8">
              1.Generally, the transfer will arrive within 4 hours after receiving your application.
              <br />
            </text>
            <text class="fun-self-stretch font_2 text_16">
              2.We will have double verification for large amount of withdrawals, which may need more time.
            </text>
          </view>
        </view>
      </view>
    </view>
    <view class="fun-flex-col fun-items-center fun-self-stretch group_12">
      <text class="font_2 text_17">Have questions about the deal?</text>
      <view class="fun-flex-col fun-justify-start fun-items-center text-wrapper">
        <text class="font_2 text_18">Enquiry</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {};
    },

    methods: {},
  };
</script>

<style scoped lang="scss">
  .mt-23 {
    margin-top: 46rpx;
  }
  .ml-5 {
    margin-left: 10rpx;
  }
  .ml-13 {
    margin-left: 26rpx;
  }
  .mt-11 {
    margin-top: 22rpx;
  }
  .page {
    padding: 32rpx 32rpx 90rpx 32rpx;
    background-color: #00033b;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .group {
      padding-left: 36rpx;
      .text {
        color: #ffffff;
        font-size: 30rpx;
        font-family: SF Pro Text;
        font-weight: 600;
        line-height: 22.18rpx;
      }
      .image {
        width: 34rpx;
        height: 22rpx;
      }
      .image_2 {
        width: 30rpx;
        height: 22rpx;
      }
      .image_3 {
        width: 48rpx;
        height: 22.66rpx;
      }
    }
    .text_2 {
      margin-top: 64rpx;
      color: #ffffff;
      font-size: 32rpx;
      font-family: SF Pro Display;
    }
    .group_2 {
      .group_3 {
        padding: 0 14rpx;
        .group_4 {
          filter: blur(3.5rpx);
          width: 214rpx;
          height: 8rpx;
        }
        .pos {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .image_4 {
          width: 80rpx;
          height: 80rpx;
        }
        .text_3 {
          font-weight: 300;
        }
      }
      .text_4 {
        padding: 0 48rpx;
      }
      .section {
        padding: 24rpx 12rpx 24rpx 22rpx;
        background-color: #1b1d53;
        border-radius: 24rpx;
        border-left: solid 2rpx #ffffff33;
        border-right: solid 2rpx #ffffff33;
        border-top: solid 2rpx #ffffff33;
        border-bottom: solid 2rpx #ffffff33;
        .group_5 {
          padding-bottom: 24rpx;
          border-bottom: solid 2rpx #ffffff24;
        }
        .group_6 {
          padding: 24rpx 0 84rpx;
          .image_5 {
            width: 32rpx;
            height: 32rpx;
          }
          .text_7 {
            font-weight: 700;
            line-height: 21.88rpx;
          }
          .section_2 {
            background-color: #5b5c83;
            width: 2rpx;
            height: 68rpx;
          }
          .view {
            margin-left: 16rpx;
          }
          .group_7 {
            margin-right: 8rpx;
            margin-top: 8rpx;
            .text_9 {
              line-height: 17.44rpx;
            }
            .text_10 {
              line-height: 17.44rpx;
            }
          }
          .group_8 {
            padding: 0 8rpx;
            .text_13 {
              line-height: 21.6rpx;
            }
            .text_14 {
              line-height: 17.22rpx;
            }
          }
          .view_2 {
            margin-top: 80rpx;
          }
          .view_3 {
            margin-top: 60rpx;
          }
          .pos_2 {
            position: absolute;
            left: 8rpx;
            right: 36.66rpx;
            top: 118.8rpx;
            .text_11 {
              margin-left: 24rpx;
            }
            .text_12 {
              margin-left: 8rpx;
            }
          }
          .section_3 {
            background-color: #ffffff33;
            border-radius: 50%;
            width: 16rpx;
            height: 16rpx;
            border-left: solid 2rpx #ffffff1a;
            border-right: solid 2rpx #ffffff1a;
            border-top: solid 2rpx #ffffff1a;
            border-bottom: solid 2rpx #ffffff1a;
          }
          .font_5 {
            font-size: 24rpx;
            font-family: SF Pro Display;
            line-height: 17.48rpx;
            color: #ffffff;
          }
          .section_4 {
            background-color: #5b5c83;
            height: 68rpx;
          }
          .pos_3 {
            position: absolute;
            left: 15rpx;
            right: 630.58rpx;
            top: 136rpx;
          }
          .pos_4 {
            position: absolute;
            left: 15rpx;
            right: 630.58rpx;
            top: 218rpx;
          }
          .group_9 {
            height: 82.28rpx;
            .group_10 {
              margin-top: 64rpx;
            }
            .view_4 {
              margin-left: 8rpx;
              margin-top: -84rpx;
            }
          }
          .pos_5 {
            position: absolute;
            left: 8rpx;
            top: 300rpx;
          }
        }
        .font_3 {
          font-size: 24rpx;
          font-family: SF Pro Display;
          color: #ffffff;
        }
        .font_4 {
          font-size: 24rpx;
          font-family: SF Pro Display;
          line-height: 17.48rpx;
          font-weight: 300;
          color: #ffffff;
        }
        .text_15 {
          margin-left: 12rpx;
          font-size: 22rpx;
          line-height: 16rpx;
        }
      }
      .font {
        font-size: 28rpx;
        font-family: SF Pro Display;
        color: #ffffff;
      }
      .group_11 {
        padding-top: 32rpx;
        .text_16 {
          word-break: break-all;
          opacity: 0.5;
        }
      }
      .text_8 {
        opacity: 0.5;
      }
    }
    .group_12 {
      margin-top: 110rpx;
      .text_17 {
        color: #7f819d;
        font-size: 26rpx;
      }
      .text-wrapper {
        padding: 12rpx 0;
        background-color: #ffffff33;
        border-radius: 24rpx;
        width: 172rpx;
        border-left: solid 2rpx #ffffff1a;
        border-right: solid 2rpx #ffffff1a;
        border-top: solid 2rpx #ffffff1a;
        border-bottom: solid 2rpx #ffffff1a;
		margin-top: 20rpx;
        .text_18 {
          font-size: 22rpx;
        }
      }
    }
    .font_2 {
      font-size: 24rpx;
      font-family: SF Pro Display;
      font-weight: 300;
      color: #ffffff;
    }
  }
</style>